<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>保险详情</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/base.js" charset="utf-8"></script>
	<script src="../../build/js/jquery.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
	<div id="container" style="padding-bottom:50px;">
		<div class="detail-4-top">
			<img :src="proDetail.detailImg">
		</div>
		<div class="detail-2-list">
			<dl class="active">
				<dt>基本信息</dt>
				<dd class="emptyHandle">
					<p>产品名称：<span>{{productInfo.name}}</span></p>
					<p>保险公司：<span>{{productInfo.issuer}}</span></p>
					<p>投保年龄：<span>{{proDetail.insuredAge}}</span></p>
					<p>保险类型：<span>{{proDetail.insuranceKind  | insuranceKind }}</span></p>
					<!--<p>投资期限：<span>{{productInfo.investmentTerm}} {{productInfo.investmentTermUnit | formatUnit}}</span></p>-->
					<p>缴费方式：<span>{{proDetail.paymentMethod | formatPaymentMethods}}</span></p>
					<p>缴费期限：<span>{{proDetail.paymentTerm}}</span></p>
					<p>参考保费：<span v-if="!proDetail.referencePremium">--</span><span v-else>{{proDetail.referencePremium }}元</span></p>
				</dd>
			</dl>
			<dl class="active">
				<dt>产品特色<!-- <span class="iconfont">&#xe68f;</span> --></dt>
				<dd>
					<img :src="proDetail.featureImg " alt="" style="width: 100%;margin-top: 15px;">
					<!--<img src="../../build/images/insurance-list.png" alt="" style="width: 100%;margin-top: 15px;">-->
				</dd>
			</dl>
			<!-- <dl>
				<dt @click="collapse">详细资料<span class="iconfont">&#xe68f;</span></dt>
				<dd>
					<p v-for="item in insuranceInstruction">
						<a :href="item.url">{{ item.name }}</a>
					</p>
				</dd>
			</dl> -->
		</div>
		<div class="btn-buttom">
			<button type="button" class="contact" @click="insuranceLink" style="width:100%;border-radius:0;background:#005d9e;color:#fff;line-height: 45px;height:45px;font-size:15px;border:1px solid #005d9e;">查看详情</button>
		</div>
		<div class="share-jump-wrap">
			<div class="iconfont-wrap">
				<span class="iconfont">&#xe65b;</span>
			</div>
			<div class="iconfont-text">
				<span>发送给微信好友</span>
				<span>请从这里下手</span>
			</div>
		</div>
	</div>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#container',
		data:{
			idStr:'',
			proDetail:'',
			productInfo:'',
			insuranceInstruction:[],
			bgImg:'',
			timestamp:'',
			nonceStr:'',
			signature:'',
			authUrl:'',
		},
		mounted:function(){
			this.$nextTick(function(){
				vm.idStr = this.getParameter('idStr');
				vm.getDetailData();
			})
		},
		updated:function () {
			this.$nextTick(function(){
				vm.emptyHandle();
			});
		},
		methods:{
			getDetailData:function(callback){										//获取数据
				var url = "/product/insurance/advisor/detail"//保险详情
				get(url,{productIdStr:vm.idStr},function(res){
					console.log(res.data.product);
					vm.proDetail = res.data;  //数据赋值
					vm.productInfo = res.data.product;
					vm.insuranceInstruction = res.data.insuranceInstruction;
					vm.proDetail.detailImg = domain + vm.proDetail.detailImg;
					vm.proDetail.featureImg = domain + vm.proDetail.featureImg;
					var len = vm.insuranceInstruction.length;
					for(var i=0;i<len;i++){
						vm.insuranceInstruction[i].url = domain + vm.insuranceInstruction[i].url;
					}
				})
			},
			//折叠菜单
			/*collapse:function($this){
				var thisMenu = $this.target.nextSibling.nextSibling;
				var isHide = thisMenu.parentNode.classList.contains('active');
				if(isHide){
					thisMenu.parentNode.classList.remove('active');
					thisMenu.style.height = 0;
				}else {
					thisMenu.parentNode.classList.add('active');
					thisMenu.style.height = thisMenu.scrollHeight + 'px';
				}
			},*/
			getParameter:function(name){
				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     		var r = window.location.search.substr(1).match(reg);
     		if(r!=null)return  unescape(r[2]); return null;
			},
			insuranceLink:function(){
				window.location.href = vm.productInfo.productUrl;
			},
			emptyHandle:function () {
				var contentLists = document.getElementsByClassName('emptyHandle');
				var contentList1 = contentLists[0].getElementsByTagName('span');
				for(var i=0; i<contentList1.length;i++){
					console.log(contentList1[i].innerHTML);
					if(contentList1[i].innerHTML == ''){
						contentList1[i].innerHTML = '-- ';
					}   // if end
				}   // for end
			}
		}
	})
</script>
</body>
</html>
